<!--设置菜单页面-->
<template>
<div class="main">
    <div class="top">
        <el-row>
            <el-col :span="10">
                <div class="logo">
                    <el-button type="primary" icon="el-icon-back" @click="showMainPage">&nbsp;&nbsp;{{$t("setting.returnBtnName")}}&nbsp;&nbsp;</el-button>
                </div>
            </el-col>
            <el-col :span="14">
                <div class="userinfo">
                    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="showAddProjectItemEvent">{{$t("setting.route.projectItemMenu.addProjectItemBtnName")}}</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
    <div class="center">
        <el-row style="width:100%;">
            <el-col :span="24">
                <el-table :data="shopProjects" highlight-current-row v-loading="listLoading" @selection-change="selsChange" stripe border>
                    <el-table-column type="index" :index="indexMethod" :label="$t('setting.route.projectItemMenu.table.xuhao')" width="120">
                    </el-table-column>
                    <el-table-column prop="projectName" :label="$t('setting.route.projectItemMenu.table.projectName')" min-width="300" sortable>
                    </el-table-column>
                    <el-table-column prop="price" :label="$t('setting.route.projectItemMenu.table.price')" width="150" sortable>
                    </el-table-column>
                    <el-table-column prop="addSalary" :label="$t('setting.route.projectItemMenu.table.addSalary')" width="150" sortable>
                        <template slot-scope="scope" v-if="scope.row.addSalary === 1">
                            <el-tag type="primary" disable-transitions>是</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="addTime" :label="$t('setting.route.projectItemMenu.table.addTime')" width="200" sortable>
                        <template scope="scope">
                            <el-icon name="time"></el-icon>
                            <span style="margin-left: 10px">{{ scope.row.addTime }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="editTime" :label="$t('setting.route.projectItemMenu.table.editTime')" width="200" sortable>
                        <template scope="scope">
                            <el-icon name="time"></el-icon>
                            <span style="margin-left: 10px">{{ scope.row.editTime }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('appointment.table.editColumnName')" width="80">
                        <template scope="scope">
                            <el-button type="success" icon="edit" size="small" @click="showEditProjectItemEvent(scope.$index, scope.row)">{{$t("appointment.table.editColumnName")}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('appointment.table.deleteColumnName')" width="80">
                        <template scope="scope">
                            <el-button type="danger" icon="delete" size="small" @click="delProjectEvent(scope.$index, scope.row)">{{$t("appointment.table.deleteColumnName")}}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-col :span="24" class="toolbar">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="float:right;">
                    </el-pagination>
                </el-col>
            </el-col>
        </el-row>
    </div>
    <!--添加项目界面-->
    <el-dialog :title="$t('setting.route.projectItemMenu.addProjectItemDialog.title')" :visible.sync="addDialogFormVisible" width="300">
        <el-form label-position="right" label-width="120px" ref="addForm" :model="addForm" :rules="saveFormRules">
            <el-form-item :label="$t('setting.route.projectItemMenu.addProjectItemDialog.projectName')" prop="projectName">
                <el-input v-model="addForm.projectName"></el-input>
            </el-form-item>
            <el-form-item :label="$t('setting.route.projectItemMenu.addProjectItemDialog.price')" prop="price">
                <el-input v-model="addForm.price"></el-input>
            </el-form-item>
            <el-form-item :label="$t('setting.route.projectItemMenu.addProjectItemDialog.addSalary')">
                <el-switch v-model="addForm.addSalaryEnabled"></el-switch>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addDialogFormVisible = false">{{$t("setting.route.shopSetDialog.dialogCancel")}}</el-button>
            <el-button type="primary" @click="addProjectEvent()">{{$t("setting.route.shopSetDialog.dialogOk")}}</el-button>
        </div>
    </el-dialog>
    <!--修改项目界面-->
    <el-dialog :title="$t('setting.route.projectItemMenu.editProjectItemDialog.title')" :visible.sync="editDialogFormVisible" width="300">
        <el-form label-position="right" label-width="120px" ref="editForm" :model="editForm" :rules="saveFormRules">
            <el-form-item :label="$t('setting.route.projectItemMenu.editProjectItemDialog.projectName')" prop="projectName">
                <el-input v-model="editForm.projectName"></el-input>
            </el-form-item>
            <el-form-item :label="$t('setting.route.projectItemMenu.editProjectItemDialog.price')" prop="price">
                <el-input v-model="editForm.price"></el-input>
            </el-form-item>
            <el-form-item :label="$t('setting.route.projectItemMenu.editProjectItemDialog.addSalary')">
                <el-switch v-model="editForm.addSalaryEnabled"></el-switch>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="editDialogFormVisible = false">{{$t("setting.route.shopSetDialog.dialogCancel")}}</el-button>
            <el-button type="primary" @click="editProjectEvent">{{$t("setting.route.shopSetDialog.dialogOk")}}</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import SetShop from '../../components/setshop.vue';
import {
    getProjects,
    addProject,
    editProject,
    delProject
} from '../../api/api';
export default {
    components: {
        setshop: SetShop
    },
    data() {
        return {
            listLoading: false,
            total: 0, //列表总条数
            pageSize: 10, //每页条数
            currentPage: 1, //当前页码
            pageVisible: false,
            shopProjects: [], //项目列表
            sels: [], //列表选中列            
            addForm: {
                projectName: "",
                price: "",
                addSalaryEnabled: false
            },
            saveFormRules: {
                projectName: [{
                    required: true,
                    message: '请输入项目名称',
                    trigger: 'blur'
                }],
                price: [{
                    validator: this.validatePrice,
                    message: '请输入正确格式的项目价格(小数点后最大两位)',
                    trigger: 'change'
                }]
            },
            editForm: {
                id: "",
                projectName: "",
                price: "",
                addSalaryEnabled: false
            },
            addDialogFormVisible: false,
            editDialogFormVisible: false,
            addLoading: false
        };
    },
    mounted() {
        this.getShopProjects();
    },
    methods: {
        //检查价格
        validatePrice(rule, value, callback) {
            //整数，带小数2位，0 
            var reg = /^-?\d+(.\d{1,2})?$/;
            if (!reg.test(value)) {
                return callback(new Error('请输入整数'));
            } else {
                callback();
            }
        },
        showMainPage() {
            //显示设置主页面
            this.$router.push({
                path: '/setting/index'
            });
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.getShopProjects();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getShopProjects();
        },
        selsChange: function (sels) {
            this.sels = sels;
        },
        //表格中的【序号】列的值生成方式
        indexMethod(index) {
            return index + 1 + (this.currentPage - 1) * this.pageSize;
        },
        getShopProjects() {
            let para = {
                pageSize: this.pageSize,
                pageNum: this.currentPage
            };
            this.listLoading = true;
            getProjects(para).then(res => {
                let {
                    msg,
                    code
                } = res;
                if (code !== "0") {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                } else {
                    this.total = res.data.total;
                    this.shopProjects = res.data.list;
                    this.listLoading = false;
                }
            });
        },
        showAddProjectItemEvent() {
            this.addDialogFormVisible = true;
        },
        showEditProjectItemEvent(index, row) {
            this.editDialogFormVisible = true;
            this.editForm.id = row.id;
            this.editForm.projectName = row.projectName;
            this.editForm.price = row.price;
            if (row.addSalary == 1) {
                this.editForm.addSalaryEnabled = true;
            } else {
                this.editForm.addSalaryEnabled = false;
            }
        },
        addProjectEvent() {
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    if (this.addForm.addSalaryEnabled) {
                        this.addForm.addSalary = 1;
                    } else {
                        this.addForm.addSalary = 0;
                    }
                    let para = Object.assign({}, this.addForm);
                    addProject(para).then((res) => {
                        this.listLoading = false;
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        this.addDialogFormVisible = false;
                        this.getShopProjects();
                    });
                }
            });
        },
        editProjectEvent() {
            this.$refs.editForm.validate((valid) => {
                if (valid) {
                    if (this.editForm.addSalaryEnabled) {
                        this.editForm.addSalary = 1;
                    } else {
                        this.editForm.addSalary = 0;
                    }
                    let para = Object.assign({}, this.editForm);
                    editProject(para).then((res) => {
                        this.listLoading = false;
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        this.editDialogFormVisible = false;
                        this.getShopProjects();
                    });
                }
            });
        },
        delProjectEvent(index, row) {
            this.$confirm('确认要删除该服务项目吗?', '提示', {
                type: 'warning'
            }).then(() => {
                this.listLoading = true;
                let para = {
                    projectItemId: row.id
                };
                delProject(para).then((res) => {
                    this.listLoading = false;
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.getShopProjects();
                });
            }).catch(() => {

            });
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~scss_vars';

.main {
    background-color: #012547;
    display: grid;
    grid-template-rows: 60px auto;
    color: #ffffff;
}

.top {
    background-color: #014171;
    padding: 0px 20px;
}

.center {
    display: flex;
    justify-content: center;
    align-items: top;
    padding: 40px 20px 0px 20px;
}

.nav {
    display: flex;
    justify-content: Center;
    align-items: Center;
    font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    font-size: 48px;
    color: #ffffff;
}

.logo {
    display: flex;
    justify-content: left;
    align-items: Center;
    height: 60px;
    font-size: 26px;
}

.userinfo {
    display: flex;
    justify-content: left;
    align-items: Center;
    text-align: right;
    float: right;
    height: 60px;
}
</style>
